<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
		<link rel="stylesheet" href="../css/main.css" />

		<!-- 引入组件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>
		 <script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
		<script src="../js/ajax.js"></script>
		<script type="text/javascript">

		</script>
		<style type="text/css">
			#bzt {
				font-size: 24px;
				margin-top: 34%;
               
			}

			#jshui {
				padding: 8%;
				background-color: #ffffff;
				text-align: center;
				border-bottom-right-radius: 10%;
				border-bottom-left-radius: 10%;
			}

			.tpys {
				width: 65%;
				height: 65%;
				border-radius: 18%;
			}

			.zi {
				color: rgb(150, 177, 212);
				font-size: 16px;
			}

			#span-zhong{
				margin-top: 15px;
				background-color: #EBEDF0;
				border-radius: 30px;
				padding: 20px 20px;
				
			}
		</style>
	</head>
	<body>
		<div id="app">
			<header>
				<van-search placeholder="请输入搜索关键词" show-action @search="onSearch">
					<div slot="action" @click="onSearch">
						<van-icon id="bzt" name="chat-o"></van-icon>
					</div>
				</van-search>
			</header>
			<section>
				<van-swipe :autoplay="3000">
					<van-swipe-item v-for="item in CarouselFigureList">
						<img :src="item.ImageUrl" style="width: 100%; height: 100%;" />
					</van-swipe-item>
				</van-swipe>
				<van-row id="jshui">
					<van-col span="6" v-for="item in HotGoodsTypeList">
						<img v-lazy="item.GoodsImageUrl" class="tpys" />
						<div class="zi" v-text="item.Name"></div>
					</van-col>
				</van-row>
				<div id="span-zhong">
					<div style="margin-top: -5px;">
						<van-col span="4" style="border-right: 1px solid #C8C9CC;line-height: 20px;">
							<span style="color: red;">咨询</span>
						</van-col>
						<van-col  span="16">
							<van-swipe :autoplay="1000" show-indicator=false >
								<van-swipe-item v-for="InformationList in InformationList"  >
									<span style="font-size: 14px;" >{{InformationList.Title}}</span>
								</van-swipe-item>
							    <div class="custom-indicator" slot="indicator">
									
								</div>
							</van-swipe>
						</van-col>
						<van-col span="4"  style="border-left: 1px solid #C8C9CC;line-height: 23px;padding-left: 5px;">
							<span>更多</span>
						</van-col>
					</div>
				</div>
				<van-badge-group class="mt" :active-key="activeKey5" @change="onChange5">
					<van-badge title="热门推荐"></van-badge>
				</van-badge-group>
				<div>
					<div style="margin: 10px;" v-for="goods in GoodsRecommendList">
						<van-row style="margin: 10px;" >
							<van-col span="8">
								<img :src="Recommend" style="width: 100%;" />
							</van-col>
							<van-col span="16">
								<div >
									<van-cell :title="goods.Name" ></van-cell>
								</div>
								<div >
									<span style="color: red;">￥{{goods.RealPrice}}</span>
								</div>
							</van-col>
						</van-row>
					</div>
				</div>
				<van-badge-group class="mt" :active-key="activeKey6" @change="onChange6">
					<van-badge title="商品列表"></van-badge>
				</van-badge-group>
				<!--数据-->
				<div>
					<van-row v-for="item in splb">
						<van-card
						  :price="item.RealPrice"
						  :origin-price="item.MarketPrice"
						  :title="item.Name"
						  @click="onclick(item.Id)"
						>
						<div slot="footer">
						累计销量:{{item.VirtualSaleCount}}
						&nbsp;&nbsp;&nbsp;&nbsp;
						&nbsp;&nbsp;&nbsp;&nbsp;
						&nbsp;&nbsp;&nbsp;&nbsp;
						&nbsp;&nbsp;&nbsp;&nbsp;
						&nbsp;&nbsp;&nbsp;&nbsp;
						&nbsp;&nbsp;&nbsp;
						{{item.BrowseCount}}次浏览
						 </div>
						 <div slot="thumb">
							 <img :src="item.GoodsImageUrl.src" onerror="this.src='../img/1.jpg'">
						 </div>
						  <div slot="tags">
								❤
						 </div>
						</van-card>
					</van-row>
				</div>
				
			</section>
			<footer>

			</footer>
		</div>
		<script>
			 Vue.use(VueLazyload, {
                error:"../img/001.jpg"              
            });
			var vm = new Vue({
				el: "#app",
				data: {
					CarouselFigureList: [],
					InformationList:[],
					GoodsRecommendList:[],
					HotGoodsTypeList:[],
					splb:[],
					value: "",
					activeKey5: 0,
					activeKey6: 0,
					img: [
						"../img/1.jpg",
						
					],
					abc:[
						"../img/2.png"
					],
					Recommend:[
						"../img/2.jpg" 
					]
				},
				methods: {
					onSearch: function() {
						this.$toast("搜索")
					},
					onChange5(keys5) {
						this.activeKeys5 = keys5;
					},
					onChange6(keys6) {
						this.activeKeys6 = keys6;
					},
					onclick:function(id){
						var del=plus.webview.create("Xiangqing.html","id",{},{shopId:id});
						plus.webview.show(del);
					},
					images: function() {
						var _this = this;
						ajax({
							url: "http://dsapi.ysd3g.com/api/IndexData",
							dataType: "jsonp",
							data:{
								p:1
							},
							success: function(res) {		
								console.log(res)
								_this.CarouselFigureList = res.Data.CarouselFigureList;//轮播图
								_this.InformationList=res.Data.InformationList;//咨询
								_this.GoodsRecommendList=res.Data.GoodsRecommendList;//热门推荐
								_this.HotGoodsTypeList = res.Data.HotGoodsTypeList;//酒水
							}
						})
					},
					sp:function(){
						_this= this;
						  ajax({
						      url:"http://dsapi.ysd3g.com/api/IndexGoodsData",
						      dataType:"jsonp",
												   
						      success:function(res){
								_this.splb = res.Data;
						      }
						  })
					}
				},
				mounted() {
					
				},
				created:function(){
					this.images();
					this.sp();
				},
			})
		</script>
	</body>
</html>
